/* Slideshow CSS */
            
#slider {
    border-radius: 2px;
    width: 100%; 
    overflow: hidden;
    height: 60vh;
    
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-font-smoothing: antialiased;
}

.slideshow-container{
    border-radius: 2px;
    width: 400%; /* 400% because we have 4 image SPACES (but we have 3 actual images) */
    height: 100%;
    height: 100%;
    
    transform: translateX(0%);
    transition: ease 0.3s transform;
}   

.slide-image {
    float: left; /* Not sure why, but this makes the ordering of the images flow from left to right instead of top to bottom */
    border-radius: 2px;
    width: 25%;
    height: 100%;
    background-size: cover;
    background-position: center;
    
    transition: ease 1s transform; 
}

.slide-image:hover { /* this animation is removed on touch screens*/
    transform: scale(1.1, 1.1);
}


/* Banner with buttons */

.bottom-slide-banner {
    position: relative;
    width: 100%;
    height: 35px;
    bottom: 35px; /* height(bottom-slide-banner) */
    border-radius: 0px 0px 2px 2px;
    background-color: rgba(30, 30, 30, 0.75);
    border-top: 1px solid #E11C1A;
}

.slideshow-buttons-container {
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-around;
    width: 100px; /* @ you need to make this larger on mobile so that the buttons are more spaced out and it is easier to click them */
    height: 100%;
}

.slideshow-button {
    background-color: rgb(211, 211, 211);
    height: 13px;
    width: 13px;
    border-radius: 10px;
}


.slideshow-button.active {
    background-color: rgb(225, 28, 26);
}


.slideshow-button:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* The texbox in the banner */

#slideshow-text-box {
    display: inline-block;
    //position: relative;
    //bottom: calc(2*7% + 1px + 1.3*27px); /* height(bottom-slide-banner) + border-size(bottom-slide-banner) + line-height(slide-text) * font-size(slide-text) */
    background-color: rgba(30, 30, 30, 0.75);
    border-top-right-radius: 5px;
    transform: translateY(calc(-100% - 1px - 35px)); /*100% (this is 100% of it's own height, not it's parent height - this is the main reason for using transform) - 1px - height(bottom-slide-banner) */ 
}

.slide-text{
    color: white;
    font-size: 27px;
    line-height: 1.3em;
    font-family: 'Lato',arial,verdana,helvetica,sans-serif;
    margin: 0px 10px 0px 10px;
    font-weight: 400;
}

.slideshow-link {
    text-decoration: none;
}